import React from 'react'
import './index.css'

/* 
count: 数量

1. 初始化状态数据
    方式一: 在构造器中: this.state = {count: 0}
    方式二: 在类体中: state = {count: 0}
2. 读取状态数据
    在render中: this.state.count
3. 更新状态数据
    this.setState({count: 新值})
*/
class StateTest extends React.Component {
  /* constructor () {// 继承的子类的构造器
    // 第一条语句必须写super()
    super()
    // 1. 初始化状态数据
    this.state = {
      count: 0
    }
  } */

  // 1. 初始化状态数据
  state = {count: 1}

  // function函数跟定义的位置没关系
  // 箭头函数由定义的位置决定
  handleClick () { // 原型对象的方法
    console.log(this) // ?   undefined
  }

  /* 
  初始化显示, 第一次调用render()
  每次setState更新状态: 调用render()
  */
  render () { // 原型方法
    console.log('render', this) // 组件对象
    // 2. 读取状态数据
    const count = this.state.count

    return <div>
      <button onClick={() => {
      console.log('click', this) // undefined
      // 3. 更新状态数据
      // 错误做法: 直接赋值更新状态数据 => 界面不会自动更新
      // this.state.count = count + 1
      // 正确做法: 
      this.setState({count: count + 1})
    }} className="xxx">点击次数: {count}</button>
    {/* this是类的实例对象, 实例去读取原型对象上的属性/方法 */}
    <button onClick={this.handleClick}>点击2</button>
    </div>
  }
}

export default StateTest